<template>
  <div class="app-container">
    <div class="datalistHeader">
      <div class="searchlist">
        <el-form
          :model="getkeywordInfo"
          :rules="rules"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="100px"
          >
          <el-form-item :label="item.fieldName"   class="timeInput" v-for="item in datetimeList" :key="item.id">
            <el-date-picker
              v-model="maintenanceTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
               format="yyyy-MM-dd HH-mm"
              value-format="yyyy-MM-dd-HH-mm"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            v-for="item in getkeywordList"
            :key="item.id"
            :label="item.fieldName"
          >
            <el-input
              v-model="item.value"
              class="inputStyle"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!-- <el-form-item label="关键字1:">
            <el-input
              v-model="queryParams.name"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item> -->
          <!-- <el-form-item label="关键字2:">
            <el-input
              v-model="queryParams.moduleName"
              clearable
              @keyup.enter.native="handleQuery"
            /> -->
          <!-- </el-form-item> -->
          <!-- getkeywordList -->
          <el-form-item>
            <el-button type="text" @click="handleQuery" class="gotoseach"
              >搜索</el-button
            >
            <span
              type="text"
              @click="resetQuery"
              style="
                color: #7483a6;
                font-size: 16px;
                font-weight: 500;
                cursor: pointer;
              "
              >重置</span
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="datalistCont">
      <el-table v-loading="loading" :data="postList" stripe max-height="555">
        <el-table-column
          show-overflow-tooltip
          v-for="(item, id) in postListTitle"
          :key="id"
          :label="item.fieldName"
          :prop="item.fieldLabel"
        />
      </el-table>
      <div class="paginationbox">
        <!-- 一开始，正常的下一页 -->
        <el-pagination
          v-show="!SearchBloone"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-size="size"
          layout="prev, pager, next"
          background
          :total="total"
          :hide-on-single-page="true"
        >
        </el-pagination>
        <!-- 点击了搜索以后的下一页 -->
        <el-pagination
          v-show="SearchBloone"
          @current-change="SearchCurrentChange"
          :current-page="page"
          :page-size="size"
          layout="prev, pager, next"
          background
          :total="total"
          :hide-on-single-page="true"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryDataInfo,
  getMetadataVoListByMetadataId,
} from "@/api/metadata/metadata";

export default {
  name: "businessData",
  data() {
    return {
      // 遮罩层
      loading: false,
      //当前是否是搜索状态 ---点击了搜索
      SearchBloone: false,
      // 总条数
      total: 0,
      // 表格数据
      postList: [],
      //如果是时间的表头
      datetimeList:[],
      //表格的数据表头
      postListTitle: [],
      //关键字的数据
      getkeywordList: [],
      // 查询参数是个变量
      // queryParams: {
      //   current: 1,
      //   size: 10,
      // },
      //动态获取字段信息
      getkeywordInfo: {},
      metadataId: "",
      metaDataLabel: "",
      maintenanceTime: [], //维护的时间
      //动态的请求数据
      metaDataWhereReq: [],
      //请求的总数据
      queryInfo: {},
      page: 1, //当前页
      size: 10, //页长
      // 表单校验
      rules: {
        name: [{ required: true, message: "关键字1不能为空", trigger: "blur" }],
        moduleName: [
          { required: true, message: "关键字2不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.metadataId = localStorage.getItem("metadataId");
    this.metaDataLabel = localStorage.getItem("metaDataLabel");
    //一进来先去请求数据字段名
    this.getFieldInfo();
  },
  methods: {
    //一进来先去请求数据字段名
    getFieldInfo() {
      let requTWO = {
        metadataId: this.metadataId,
      };
      getMetadataVoListByMetadataId(requTWO)
        .then((response) => {
          console.log(response, "第一个接口返回来的值");
          let allreqList = response.data;
          this.postListTitle = [];
          //得到表格的表头
          allreqList.forEach((item) => {
            this.postListTitle.push(item.metadataFieldInfo);
          });
          this.getkeywordList = [];
          console.log(this.postListTitle, " this.postListTitle");
          //查找是否是关键字
          this.postListTitle.forEach((items) => {
            if (items.inGlobalSearch == 1) {            
                let Object = {
                  type:items.fieldType,
                  fieldName: items.fieldName,
                  value: "",
                  fieldLabel: items.fieldLabel,
                }; 
                 if (items.fieldType == "Datetime") {
                      this.datetimeList.push(Object)      
              }else{
                   this.getkeywordList.push(Object);
              }            
            }
          });
          console.log(this.getkeywordList,this.datetimeList,"this.datetimeList"," this.getkeywordList");

          this.getList();
        })
        .catch((err) => {
          // this.$message.error(err.message);
          console.log(err);
        });
    },
    //一般的请求数据
    getList() {
      let queryInfo = {
        metaDataLabel: this.metaDataLabel, //元数据名称
        timeout: 10, //超时时间
        link: false, //是否要进行连表查询
        //排序
        // ordered: {
        //                //key为字段名,value为true则升序,否则降序
        //             },
        page: this.page, //当前页
        size: this.size, //页长
      };
      queryDataInfo(queryInfo)
        .then((response) => {
          let responseInfo = response.data;
          this.postList = responseInfo.dataList;
          this.total = responseInfo.total;
          this.page = responseInfo.page;
          this.size = responseInfo.size;
        })
        .catch((err) => {
          // this.$message.error(err.message);
          console.log(err);
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      console.log(this.maintenanceTime,'maintenanceTime');
      this.metaDataWhereReq = [];
      this.SearchBloone = true;
      //如果是时间
      this.datetimeList.map((item) => {
        console.log(item, "循环每一项11111111111");
        if(this.maintenanceTime.length==2){
           let metaDataWher = {
            key: item.fieldLabel, //元数据字段label
            factor: "BETWEEN", //条件枚举,参见条件枚举对照表
            value: [this.maintenanceTime[0],this.maintenanceTime[1]],
          };
          this.metaDataWhereReq.push(metaDataWher);
        }
      });
      this.getkeywordList.map((item) => {
        console.log(item, "循环每一项222222222");
        if (item.value) {
          let metaDataWher = {
            key: item.fieldLabel, //元数据字段label
            factor: "LIKE", //条件枚举,参见条件枚举对照表
            value: [item.value],
          };
          this.metaDataWhereReq.push(metaDataWher);
        }
      });

      this.queryInfo = {
        metaDataLabel: this.metaDataLabel, //元数据名称
        timeout: 10, //超时时间
        link: false, //是否要进行连表查询
        metaDataWhereReq: this.metaDataWhereReq,
        //排序
        // ordered: {
        //                //key为字段名,value为true则升序,否则降序
        //             },
        page: this.page, //当前页
        size: this.size, //页长
      };
      queryDataInfo(this.queryInfo)
        .then((response) => {
          let responseInfo = response.data;
          this.postList = responseInfo.dataList;
          this.total = responseInfo.total;
          this.page = responseInfo.page;
          this.size = responseInfo.size;
          this.$modal.msgSuccess("查询成功！");
        })
        .catch((err) => {
          // this.$message.error(err.message);
          console.log(err);
        });
      // this.queryParams.current = 1;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.getkeywordList.map((item) => {
        item.value = "";
      });
      this.maintenanceTime=[];
      this.page = 1;
      this.SearchBloone = false;
      this.$modal.msgSuccess("重置成功！");
      this.getList();
    },
    //改变页数
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    //点击了搜索以后的下一页
    SearchCurrentChange(val) {
      this.queryInfo = {
        metaDataLabel: this.metaDataLabel, //元数据名称
        timeout: 10, //超时时间
        link: false, //是否要进行连表查询
        metaDataWhereReq: this.metaDataWhereReq,
        //排序
        // ordered: {
        //                //key为字段名,value为true则升序,否则降序
        //             },
        page: val, //当前页
        size: this.size, //页长
      };
      queryDataInfo(this.queryInfo)
        .then((response) => {
          let responseInfo = response.data;
          this.postList = responseInfo.dataList;
          this.total = responseInfo.total;
          this.page = responseInfo.page;
          this.size = responseInfo.size;
          this.$modal.msgSuccess("查询成功！");
        })
        .catch((err) => {
          // this.$message.error(err.message);
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.app-container {
  font-family: "PingFang SC", "microsoft yahei";
  background: #fff;
  height: 755px;
}
.datalistHeader {
  background: #fff;
  width: 96%;
  margin: auto;
  height: 95px;

  border-bottom: 1px solid #e7eaec;
  border-radius: 6px;
  // padding-top: 10px;
  .searchlist {
    float: left;
    margin: 30px -10px;
  }
  .datalistTop {
    float: right;
    margin: 30px 0px;

    .newdata {
      width: 140px;
      height: 40px;
      border-radius: 4px;
      padding: 7px 20px;
      font-size: 16px;
      // background-color: $labelColor;
    }
  }
}
.datalistCont {
  width: 100%;
  background: #fff;
  padding: 0 35px;
  .el-button--text {
    font-size: 18px;
    margin-right: 5px;
  }
  .nolockColor {
    color: #7483a6 !important;
  }
  .lockColor {
    color: #e7eaec !important;
  }
}
.paginationbox {
  height: 70px;
}
.el-pagination {
  text-align: right;
  padding-top: 20px;
}
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner,
::v-deep .el-checkbox__inner {
  background: #fff;
  border: 1px solid $labelColor;
}
::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: $labelColor;
}
.gotoseach {
  // color: $base-menu-light-background !important;
}
// 分页
::v-deep .btn-prev {
  width: 95px;
  height: 40px;
  border-radius: 4px;
  background-image: url("../../../assets/images/arrowLeft.png") !important;
}
::v-deep .btn-prev .el-icon-arrow-left {
  display: none !important;
}
::v-deep .btn-next .el-icon-arrow-right {
  display: none !important;
}
::v-deep .el-pager li {
  width: 45px;
  height: 40px;
  border-radius: 4px !important;
  line-height: 40px;
}
::v-deep .el-pager li:not(.disabled).active {
  background-color: $labelColor;
}
::v-deep .btn-next {
  width: 95px;
  height: 40px;
  border-radius: 4px;
  background-image: url("../../../assets/images/arrowRight.png") !important;
}
::v-deep .is-checked .el-checkbox__inner {
  background: #fff;
  border-color: $labelColor;
}
::v-deep .el-checkbox__input .is-checked .el-checkbox__inner {
  background: #fff !important;
  border-color: $labelColor;
}
::v-deep .el-checkbox__inner::after {
  border-color: $labelColor;
}
::v-deep .searchlist .el-input__inner {
  width: 300px;
  height: 40px;
  line-height: 40px;
}
::v-deep .inputStyle .el-input__inner{
  width: 200px;
}
</style>
<style scoped>
/deep/ .el-table__row {
  height: 50px;
}
/deep/ .el-table td.el-table__cell {
  padding: 5px !important;
  font-size: 16px;
  color: #272e3e;
}
/deep/ .el-table th.el-table__cell > .cell {
  font-size: 16px;
  color: #7483a6 !important;
}
/deep/.el-form-item__label {
  font-size: 16px;
  font-weight: 500;
}
/deep/ .searchlist .el-button--small {
  font-size: 16px;
  font-weight: 500;
  padding: 7px 20px;
}
/deep/.el-table th.el-table__cell.is-leaf {
  background-color: #edf0f4 !important;
}
/deep/.el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background-color: #f2f6fc !important;
}
/deep/.el-table th.el-table__cell.is-leaf {
  border: none;
}
/deep/.el-table td.el-table__cell {
  border: none;
}
/deep/.searchlist .el-form-item__label,
/deep/.searchlist .el-form-item__content {
  font-size: 18px !important;
}

</style>>

